<template>
  <div class="info-chatlogList">
      <ul class="chatlogList-wrapper">
          <li class="chatlog-item" v-for="(item,key) in chatlogList " :key="key">
              <div class="chatlog-headimg">
                  <a class="headimg-btn">
                      <img :src="item.contHeadImg"/>
                      <!-- <img src="../../../assets/chatlogimg_01.png"/> -->
                  </a>
              </div>
              <div class="chatlog-detailed">
                  <p class="chatlog-nickname">{{item.contNickname}}</p>
                  <p class="chatlog-record">{{item.contText}}</p>
              </div>
              <div class="chatlog-time">
                   <p class="chatlog-time-txt">{{item.chatlogTime}}</p>
                   <div class="chatlog-count-wrapper clearfix">
                     <p class="chatlog-count">{{item.chatlogCount}}</p>
                   </div>
              </div>
          </li>

      </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      chatlogList: [{
        contHeadImg: '',
        contNickname: '心难懂 i',
        contText: '听了很多大道理，还是过不好这。',
        chatlogTime: '下午21:23',
        chatlogCount: '1'
      }, {
        contHeadImg: '',
        contNickname: '悄然改变',
        contText: '话不多说，我们先上图',
        chatlogTime: '下午14:30',
        chatlogCount: '2'
      }, {
        contHeadImg: '',
        contNickname: '晴天雨水',
        contText: '小猫爱吃鱼,但鱼不喜欢猫',
        chatlogTime: '下午24:30',
        chatlogCount: '3'
      }, {
        contHeadImg: '',
        contNickname: '自信',
        contText: '下午好',
        chatlogTime: '下午24:30',
        chatlogCount: '4'
      }, {
        contHeadImg: '',
        contNickname: '成全i',
        contText: '晚上好',
        chatlogTime: '下午24:30',
        chatlogCount: '5'
      }, {
        contHeadImg: '',
        contNickname: '笑着放了自己',
        contText: '在吗',
        chatlogTime: '下午24:30',
        chatlogCount: '6'
      }, {
        contHeadImg: '',
        contNickname: '笑着放了自己',
        contText: '在吗',
        chatlogTime: '下午24:30',
        chatlogCount: '6'
      }, {
        contHeadImg: '',
        contNickname: '笑着放了自己',
        contText: '在吗',
        chatlogTime: '下午24:30',
        chatlogCount: '6'
      }, {
        contHeadImg: '',
        contNickname: '笑着放了自己',
        contText: '在吗',
        chatlogTime: '下午24:30',
        chatlogCount: '6'
      }, {
        contHeadImg: '',
        contNickname: '笑着放了自己',
        contText: '在吗',
        chatlogTime: '下午24:30',
        chatlogCount: '6'
      }, {
        contHeadImg: '',
        contNickname: '笑着放了自己',
        contText: '在吗',
        chatlogTime: '下午24:30',
        chatlogCount: '6'
      }, {
        contHeadImg: '',
        contNickname: '笑着放了自己',
        contText: '在吗',
        chatlogTime: '下午24:30',
        chatlogCount: '6'
      }
      ]
    }
  },
  mounted () {
    this.ImageHandle()
  },
  methods: {
    ImageHandle () {
      var chatlogDate = this.chatlogList
      chatlogDate.forEach((val, key) => {
        let j = key + 1
        if (j > 6) {
          j = key - 5
        }
        val.contHeadImg = require('../../../assets/chatlogimg_0' + j + '.png')
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~common/stylus/border-1px'
@import '~common/stylus/varibles'
  .info-chatlogList
    position:relative
    top:2.752rem
    left:0
    margin-bottom:2.496rem
    padding-bottom:.469333rem
    background:$bgColor
    .chatlogList-wrapper
      list-style-type:none
      padding:0
      margin:0
      .chatlog-item
        display:flex
        flex-direction:row
        align-items:center
        height:2.282667rem
        border-bottom-1px(#d2d2d2)
        padding:0 .448rem
        background:white
        .chatlog-headimg
          margin-right:.469333rem
          .headimg-btn
            display:block
            img
              width:1.621333rem
              height:1.557333rem
              vertical-align:middle
        .chatlog-detailed
          width:9.92rem
          margin-right:.213333rem
          .chatlog-nickname
            color:#101010
            font-size:.682667rem
            margin-bottom:.256rem
          .chatlog-record
            color:#595959
            font-size:.597333rem
        .chatlog-time
          .chatlog-time-txt
            font-size:.597333rem
            color:#929292
            margin-bottom:.341333rem
          .chatlog-count-wrapper
            width:100%
            .chatlog-count
              width:.64rem
              height:.64rem
              float:right
              border-radius:50%
              background:#f30614
              color:white
              font-size:.512rem
              text-align:center

</style>
